<template>
	<view @click="changeStatus" v-if="!onlineStatus || loading || plans.length" class="offline-banner"
		:style="{ top: top + 'px' }">{{ loading ? '同步中...' : (plans.length && onlineStatus ? '同步失败，点击重试' :
			(test ? '网络检测中...' : '离线模式，点击重新检测网络')) }}
	</view>
</template>
<script>
import { mapState } from 'vuex';
import { submitData } from '@/utils/offline.js';
import wxNetwork from '@/utils//wx_network.js';
import { debounce } from '@/utils/tools.js';
import { resquestTest, DOWNLOAD_TIME, NETWORK_STATUS,emitNetworkStatus } from '@/utils/wx_network.js';
let t = null;
export default {
	name: 'offline-banner',
	props: {
		planId: [String, Number],
		top: [String, Number]
	},
	data() {
		return {
			statusBarHeight: '',
			loading: false,
			plans: '',
			// 是否测速中
			test: false
		};
	},
	computed: {
		// 离线状态 ture 在线
		...mapState('system', ['onlineStatus']),

	},
	watch: {

	},
	created() {
		this.getPlans();
		this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 44;
		// this.checkSyncData()
		t = this;
	},
	methods: {
		// 刷新数据
		refresh() {
			uni.hideLoading();
			this.$emit('refresh');
		},
		getPlans() {
			this.plans = (uni.getStorageSync('workingPlans') || '');
		},
		// 检查是否存在未同步数据 在线模式尝试同步
		checkSyncData() {
			if (this.onlineStatus) {
				// 在线
				if (this.plans.length) {
					this.changeStatus();
				}
			}
		},
		// 测速
		async testNetwork() {
			this.test = true;
			uni.getNetworkType({
				success(res) {
					console.log('testNetwork', res);
					const networkType = res.networkType;
				},
				fail(err) {
					console.log('testNetwork-err', err);
				}
			});
			const startTime = +new Date();
			const backs = await resquestTest();// 测试请求
			const requestTime = +new Date() - startTime;
		
			let networkStatus = NETWORK_STATUS.NORMAL;
			if (!backs) {
				networkStatus = NETWORK_STATUS.OFFLINE;
			} else if (requestTime > DOWNLOAD_TIME) {
				networkStatus = NETWORK_STATUS.POOR;
			}
			console.log('testNetwork-end', networkStatus);
			emitNetworkStatus(networkStatus);
			setTimeout(() => {
				this.test = false;
			}, 500);
		},

		changeStatus: debounce(async () => {
			return new Promise(async (resolve, reject) => {
				console.log('111');
				uni.showLoading({
					title: '同步中',
					mask: true,
				});

				t.getPlans();
				if (t.plans.length == 0) {
					uni.hideLoading();
					if (!t.test) {
						t.testNetwork();
					}
					resolve();
					return;
				}
				// 离线且无需要同步的任务
				if (!t.plans && !t.onlineStatus) {
					await wxNetwork.getNetworkStatus({ hideTips: true });
					setTimeout(() => {
						if (!t.onlineStatus) {
							uni.hideLoading();
							uni.showToast({
								title: '切换失败,请检查网络',
								icon: 'none'
							});
							reject();
						} else {
							t.refresh();
							resolve();
						}
					}, 200);
					return;
				}
				if (!t.plans) {
					resolve();
				}
				t.loading = true;
				submitData().then(res => {
					console.log('plans', res);
					t.loading = false;
					t.getPlans();
					t.refresh();
					resolve();
				}).catch(err => {
					uni.hideLoading();
					t.loading = false;
					t.getPlans();
					reject();
					// 请求失败
					uni.showModal({
						title: '同步失败',
						content: JSON.stringify(err),
						showCancel: false
					});
					// uni.showToast({
					//     title: '同步失败',
					//     icon: 'none'
					// })
				});
			});
		}, 400),

	}
};
</script>
<style lang="scss" scoped>
.offline-banner {
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 44rpx;
	text-align: center;
	background-color: rgba(134, 127, 120, 0.7);
	font-size: 24rpx;
	z-index: 300;
}
</style>